<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="Usuarios"/>
        </ui:define>

        <ui:define name="cuerpo">
            <p:growl id="message" showDetail="true" />
            <h:form id="form">
                <p:growl id="validacionMensaje" showDetail="true" autoUpdate="true"/>

                <p:panel header="Administración de Usuarios" style="font-size: small">
                    <table width="100%" border="0" >
                        <p:commandButton value="Crear" style="font-size: small" 
                                         action="#{usuarioBean.cargarNuevo()}" 
                                         icon="ui-icon-circle-plus"
                                         update="@form:dlDialog" oncomplete="PF('dlDialogVar').show()"
                                         process="@this">
                        </p:commandButton>        

                    </table>   

                    <p:dataTable id="dtUsuarios" var="item" value="#{usuarioBean.usuarios}" widgetVar="tablaUsuarios"                                                                  
                                 emptyMessage="No existen datos" sortMode="multiple"
                                 style="margin-top: 10px; font-size: x-small; text-align: center"                                
                                 paginator="true" rows="10" rowKey="#{item.codUsuario}">

                        <f:facet name="header">
                            <p:outputPanel>
                                <h:outputText value="Buscar por todos los criterios:" />
                                <p:inputText id="globalFilter" onkeyup="PF('tablaUsuarios').filter()" style="width:200px" placeholder="Ingrese la palabra clave"/>
                            </p:outputPanel>
                        </f:facet>   

                        <p:column headerText="Cédula" filterBy="#{item.cedula}" sortBy="#{item.cedula}">
                            <p:outputLabel value="#{item.cedula}" style="text-align: center"/>
                        </p:column>

                        <p:column headerText="Nombres" filterBy="#{item.nombres}" sortBy="#{item.nombres}">
                            <p:outputLabel value="#{item.nombres}" style="text-align: center"/>
                        </p:column>

                        <p:column headerText="Apellidos" filterBy="#{item.apellidos}" sortBy="#{item.apellidos}">
                            <p:outputLabel value="#{item.apellidos}" style="text-align: center"/>
                        </p:column>

                        <p:column headerText="Correo Electrónico" filterBy="#{item.email}" sortBy="#{item.email}">
                            <p:outputLabel value="#{item.email}" style="text-align: center"/>
                        </p:column>

                        <p:column headerText="Rol" >
                            <p:outputLabel value="#{item.rol.nombre}" style="text-align: center"/>
                        </p:column>

                        <p:column headerText="Estado" >
                            <center>
                                <p:selectBooleanCheckbox value="#{item.estado}" disabled="true" />
                            </center>
                        </p:column>

                        <p:column headerText="Herramientas" >                                                        
                            <div align="center">

                                <p:commandButton value="Modificar" action="#{usuarioBean.cargarModificar()}" update="@form:dlDialog" 
                                                 oncomplete="PF('dlDialogVar').show()" process="@this">
                                    <f:setPropertyActionListener value="#{item}" target="#{usuarioBean.usuario}" />
                                </p:commandButton>  | 

                                <p:commandButton value="Detalles" action="#{usuarioBean.cargarDetalles()}" update="@form:dlDialog:" 
                                                 oncomplete="PF('dlDialogVar').show()" process="@this">
                                    <f:setPropertyActionListener value="#{item}" target="#{usuarioBean.usuario}" />
                                </p:commandButton>                                

                            </div>
                        </p:column> 
                    </p:dataTable>


                    <p:dialog id="dlDialog" resizable="false" header="#{usuarioBean.tituloDialogo}"  appendTo="@(body)"
                              widgetVar="dlDialogVar" modal="true" showEffect="fade" hideEffect="fade" dynamic="true">

                        <p:panel id="dlUsuario" style="text-align:center; font-size: small">
                            <p:panelGrid columns="2" rendered="#{not empty usuarioBean.usuario}" columnClasses="label,value">                                

                                <p:outputLabel value="Cédula:" for="txtCedulaUsuario"/>
                                <p:inputText id="txtCedulaUsuario" value="#{usuarioBean.usuario.cedula}" title="Cédula" 
                                             required="true" requiredMessage="El campo 'Cédula' es requerido" style="width: 200px"
                                             onkeyup="value = value.toUpperCase();"
                                             readonly="#{usuarioBean.soloLectura}"/>

                                <p:outputLabel value="Nombres:" for="txtNombreUsuario"/>
                                <p:inputText id="txtNombreUsuario" value="#{usuarioBean.usuario.nombres}" title="Nombres" 
                                             required="true" requiredMessage="El campo 'Nombres' es requerido" style="width: 200px"
                                             onkeyup="value = value.toUpperCase();"
                                             readonly="#{usuarioBean.soloLectura}"/>


                                <p:outputLabel value="Apellidos" for="txtApellidoUsuario"/>
                                <p:inputText id="txtApellidoUsuario" value="#{usuarioBean.usuario.apellidos}" title="Apellidos" 
                                             required="true" requiredMessage="El campo 'Apellidos' es requerido" style="width: 200px"
                                             onkeyup="value = value.toUpperCase();"
                                             readonly="#{usuarioBean.soloLectura}"/>


                                <p:outputLabel value="Correo Electrónico" for="txtCorreoUsuario"/>
                                <p:inputText id="txtCorreoUsuario" value="#{usuarioBean.usuario.email}" title="Correo Electrónico" 
                                             required="true" requiredMessage="El campo 'Correo Electrónico' es requerido" style="width: 200px"
                                             validatorMessage="Debe ingresar un correo válido"
                                             readonly="#{usuarioBean.soloLectura}">
                                    <f:validateRegex for="txtCorreoUsuario"
                                                     pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                                </p:inputText>


                                <p:outputLabel value="Contraseña" for="txtContrasenaUsuario" rendered="#{not usuarioBean.soloLectura}"/>
                                <p:password id="txtContrasenaUsuario" value="#{usuarioBean.usuario.contrasena}" title="Contraseña" 
                                            required="true" requiredMessage="El campo 'Contraseña' es requerido" style="width: 200px"
                                            onkeyup="value = value.toUpperCase();"
                                            readonly="#{usuarioBean.soloLectura}"
                                            redisplay="#{usuarioBean.activarModificar}"
                                            rendered="#{not usuarioBean.soloLectura}">
                                    <f:validateLength minimum="5" maximum="16" for="txtContrasenaUsuario"/>

                                </p:password>


                                <p:outputLabel value="Rol" for="cboRoles"/>
                                <p:selectOneMenu id="cboRoles" filter="true" filterMatchMode="contains" value="#{usuarioBean.usuario.rol}"
                                                 converter="#{rolConverter}"
                                                 styleClass="menu" panelStyleClass="panel"
                                                 required="true" requiredMessage="El campo 'Rol' es requerido"
                                                 style="width: 200px; font-size: small;" disabled="#{usuarioBean.soloLectura}">
                                    <f:selectItem itemLabel="Seleccione..." itemValue="#{null}" noSelectionOption="true" />
                                    <f:selectItems value="#{usuarioBean.roles}" var="rol"
                                                   itemLabel="#{rol.nombre}" itemValue="#{rol}"/>
                                </p:selectOneMenu>


                                <p:outputLabel value="Descripción"/>
                                <p:inputTextarea id="txtDescripcionUsuario" value="#{usuarioBean.usuario.descripcion}"
                                                 style="width: 200px" readonly="#{usuarioBean.soloLectura}"/>

                                <p:outputLabel value="Fecha de creación" rendered="#{usuarioBean.soloLectura}"/>
                                <p:inputText id="txtFechaCreacion" value="#{usuarioBean.usuario.fechaCreacion}" style="width: 200px"
                                             readonly="#{usuarioBean.soloLectura}" rendered="#{usuarioBean.soloLectura}">
                                    <f:convertDateTime type="date" locale="es_EC" timeZone="America/Guayaquil"  
                                                       dateStyle="default" pattern="yyyy/dd/MM HH:mm:ss" />
                                </p:inputText>

                                <p:outputLabel value="Estado" for="chkEstado" rendered="#{usuarioBean.activarModificar || usuarioBean.soloLectura}"/>
                                <p:selectBooleanCheckbox id="chkEstado" value="#{usuarioBean.usuario.estado}"
                                                         disabled="#{usuarioBean.soloLectura}" 
                                                         rendered="#{usuarioBean.activarModificar || usuarioBean.soloLectura}"/>
                            </p:panelGrid>
                            <div align="right">
                                <p:outputLabel value = "* Campos Obligatorios"/>
                            </div>
                            <br/>
                            <div align="center">
                                <p:commandButton rendered="#{usuarioBean.activarNuevo}" 
                                                 update=":form:dtUsuarios,@form:dlDialog:dlUsuario"
                                                 icon="ui-icon-disk"
                                                 action="#{usuarioBean.guardar()}" 
                                                 partialSubmit="true" process="@form:dlDialog"
                                                 value="Guardar" >                                  
                                    <p:confirm header="Confirmación" message="Esta seguro de guardar este registro?" icon="ui-icon-alert" />
                                </p:commandButton>                                
                            </div>
                            <div align="center">
                                <p:commandButton  rendered="#{usuarioBean.activarModificar}" 
                                                  update=":form:dtUsuarios,@form:dlDialog:dlUsuario"
                                                  icon="ui-icon-pencil"
                                                  action="#{usuarioBean.modificar()}" 
                                                  partialSubmit="true" process="@form:dlDialog"  
                                                  value="Modificar">                                  
                                    <p:confirm header="Confirmación" message="Esta seguro de modificar este registro?" icon="ui-icon-alert" />
                                </p:commandButton>                                  
                            </div> 
                        </p:panel>
                    </p:dialog>                    
                </p:panel>
                <p:confirmDialog style="font-size: small" global="true" showEffect="fade" hideEffect="explode">
                    <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                </p:confirmDialog>
            </h:form>

        </ui:define>

    </ui:composition>
</html>
